{extend name="admin@common/main" /}

{block name="body"}
    <div class="main-title cf">
        <h2>
           {:lang("_CONFIGURATION_SORTING_")}
        </h2>
    </div>
    <div class="sort with-padding">
        <form action="{$savePostUrl}" method="post">
            <!-- <div class="sort_top">
               {:lang("_SEARCH:_")}<input type="text"><button class="btn search" type="button">{:lang("_CHECK_WITH_SPACE_")}</button>
            </div> -->

            <div class="clearfix">

                <div class="col-xs-2">
                    <select value="" size="15" class="form-control" style="width: 100%">
                        {volist name="list" id="vo"}
                            <option class="ids" title="{$vo.title}" value="{$vo.id}">{$vo.title}</option>
                        {/volist}
                    </select>
                </div>
                <div class="col-xs-1">
                    <button class="top btn btn-block" type="button">{:lang("_FIRST_WITH_SPACE_")}</button>
                    <button class="up btn btn-block" type="button">{:lang("_UPPER_SHIFT_WITH_SPACE_")}</button>
                    <button class="down btn btn-block" type="button">{:lang("_NEXT_MOVE_WITH_SPACE_")}</button>
                    <button class="bottom btn btn-block" type="button">{:lang("_AFTER_THE_MOST_WITH_SPACE_")}</button>
                </div>
            </div>
            <div class="sort_bottom">
                <input type="hidden" name="ids">
                {volist name="buttonList" id="button"}
                    <a {$button.attr}>{$button.title}</a>&nbsp;&nbsp;
                {/volist}
            </div>
        </form>
    </div>
{/block}

{block name="script"}
    <script type="text/javascript">
        $(function(){
            sort();
            $(".top").click(function(){
                rest();
                $("option:selected").prependTo("select");
                sort();
            })
            $(".bottom").click(function(){
                rest();
                $("option:selected").appendTo("select");
                sort();
            })
            $(".up").click(function(){
                rest();
                $("option:selected").after($("option:selected").prev());
                sort();
            })
            $(".down").click(function(){
                rest();
                $("option:selected").before($("option:selected").next());
                sort();
            })
            $(".search").click(function(){
                var v = $("input").val();
                $("option:contains("+v+")").attr('selected','selected');
            })
            function sort(){
                $('option').text(function(){return ($(this).index()+1)+'.'+$(this).text()});
            }

            //重置所有option文字。
            function rest(){
                $('option').text(function(){
                    return $(this).text().split('.')[1]
                });
            }

            //获取排序并提交
            $('.sort_confirm').click(function(){
                var arr = new Array();
                $('.ids').each(function(){
                    arr.push($(this).val());
                });
                $('input[name=ids]').val(arr.join(','));
                $.post(
                        $('form').attr('action'),
                        {
                            'ids' :  arr.join(',')
                        },
                        function(data){
                            if (data.code) {
                                updateAlert(data.msg + {:lang('_THE_PAGE_WILL_AUTOMATICALLY_JUMP_TO_WALK_THE_WALK_TODAY_WITH_SINGLE_')},'success');
                            }else{
                                updateAlert(data.msg,'error');
                            }
                            setTimeout(function(){
                                if (data.code) {
                                    $('.sort_cancel').click();
                                }
                            },1500);
                        },
                        'json'
                );
            });
        })
    </script>
{/block}